<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding:0px;outline: none;}
       #box{width:500px;height:500px;background: rgb(238,238,238);margin:40px auto;}
       h2{width:100%;height:30px;padding-top:30px;
       text-align: center;color: #ffffff;font-size:26px;padding-bottom:60px}
       #box1{width:450px;height:25px;margin:auto;margin-bottom:30px;line-height: 20px;padding:10px}
       .input{width:100px;height:20px;}
       button{
           width:150px;
           height:150px;
           border-radius: 150px;
           background: #000000;
           color:#ffffff;
           line-height: 150px;
           font-family: Arial, Helvetica, sans-serif;
           font-size: 40px;
           margin-left:170px;
       }
       #box2{width:450px;height:30px;margin: 20px auto;font-size: 30px;font-family: Arial, Helvetica, sans-serif;text-align: center; }
       .time1{
           color:#ff0000;
       }
       #box3{
        width:450px;height:30px;margin: 40px auto;font-size: 30px;font-family: Arial, Helvetica, sans-serif;text-align: center;
       }
    </style>
</head>
<body>
    <div id="box">
        <h2>倒计时</h2>
        <div id="box1">
        请输入
        <input type="text" id="year" class="input" value="2020">年
        <input type="text" id="month" class="input" value="07">月
        <input type="text" id="date" class="input" value="30">日
        </div>
        <button>开始</button>
        <div id="box2">
            现在距离-<span class="time1">0000</span>-还剩:
        </div>
        <div id="box3">
                <span class="time1">00</span>天<span class="time1">00</span>小时<span class="time1">00</span>分<span class="time1">00</span>秒
        </div>
    </div>
    <script>
        //1、获取元素
        var btn = document.getElementsByTagName("button")[0];
        var year = document.getElementById("year");
        var month = document.getElementById("month");
        var date = document.getElementById("date");
        var span = document.getElementsByClassName("time1");
        var timer = null;
        //2、对按钮发生事件
        btn.onclick = function(){
            // console.log(year.value,month.value,date.value);
            var year_value = year.value;
            var month_value = month.value;
            var date_value = date.value;
            span[0].innerText = year_value+'年'+month_value+'月'+date_value+'日';
            showtime();
            //清除之前的定时器
            clearInterval(timer);
            timer = setInterval(showtime,1000);
            //计算倒计时
            function showtime(){
                //计算倒计时（系统时间、输入时间，求差值）
                var now = new Date();
                var target = new Date(year_value,month_value-1,date_value);
                //相减
                // console.log(target - now); // 137898013 毫秒
                //毫秒转换成秒  / 1000
                var time = Math.floor((target - now) / 1000) // 137832
                //单位换算
                //天
                var day = Math.floor(time / 86400); // 60*60*24
                //小时
                var hour = Math.floor(time%86400 / 3600);
                //分钟
                var mis = Math.floor(time%3600 / 60);
                //秒数
                var sec = time%60;
                //给标签赋值
                span[1].innerText = day;
                span[2].innerText = hour;
                span[3].innerText = mis;
                span[4].innerText = sec;

            }
        }
    </script>
</body>
</html>